<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pieDemo</title>
    <script src="../js/chart.min.js"></script>
</head>
<body>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart1"></canvas>
</div>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart2"></canvas>
</div>
<script>
    var ctx1 = document.getElementById('myChart1').getContext('2d');
    var myChart1 = new Chart(ctx1, {
        type: 'pie',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'lightGray',
                backgroundColor: ['pink', 'skyblue', 'LightYellow', 'LawnGreen', 'MediumPurple', 'orange'],
                borderWidth: 1
            }]
        }
    });
    var ctx2 = document.getElementById('myChart2').getContext('2d');
    var myChart2 = new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor:'lightGray',
                backgroundColor:['pink','skyblue','LightYellow','LawnGreen','MediumPurple','orange'],
                borderWidth: 1
            }]
        }
    });
</script>
</body>
</html>
